<template>
   <div class="second-big-shuffling">
       <div class="word">
           <img src="../../../assets/indexImg/two_top_img.png" alt="">
       </div>
       <div class="second-shuffling">
           <!-- Swiper -->
           <div class="swiper mySwiper1">
               <div class="swiper-wrapper">
                   <router-link :to="{path:'/detail',query:{idsecond:item.id,index:0,title:2}}" tag="div" class="swiper-slide" v-for="(item,index) in imgList2" :key="index">
                      <div class="little-slide">
                          <div class="img-shu" :style="{background:`url(http://www.shangyuninfo.com/api/profile/product/${item.route})`}"></div>
                          <!--                       <img :src="`http://www.shangyuninfo.com/api/profile/product/${item.route} `" alt="">-->
                         </div>
                      </router-link>
               </div>
               <div class="swiper-pagination1"></div>
           </div>
       </div>
       <router-link to="/product" tag="div" class="more"><img src="" alt=""></router-link>
       <div class="toBottom"  @click="nextSlide"></div>
   </div>
</template>

<script>
    import Swiper from "swiper";
    import {getProductList} from "../../../api";
    export default {
        name: "secondShuffling",
        data(){
            return {
                imgList2:[]
            }
        },
        created() {
            getProductList ().then(res=>{
                // console.log(res.rows.filter(item=>item.enabled==1))
                this.imgList2=res.rows.filter(item=>item.enabled==1)
            })
        },
        methods:{
            nextSlide(){
                this.$store.state.imgPic.slideNext();
            }
        },
        mounted() {

     },
     watch: {
         imgList2() {
             setTimeout(() => {
                 new Swiper(".mySwiper1", {
                     effect: "coverflow",
                     grabCursor: true,
                     centeredSlides: true,
                     coverflowEffect: {
                         rotate: 50,
                         stretch: 0,
                         depth: 100,
                         modifier: 1,
                         slideShadows: true},
                     direction: 'horizontal',   //水平滑动
                     // centeredSlides: true,              //居中展示
                     spaceBetween:20,           //间距20px
                     slidesPerView:'auto',            //显示多少个
                     loop: true,
                     pagination: {
                         el: '.swiper-pagination1',
                         clickable: true,
                     },
                 });
             }, 0)
         }
     }
    }
</script>

<style scoped lang="less">
    .swiper {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    /deep/ .swiper-pagination-bullet {
        width: 0;
        height: 0;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 230px;
        height: 300px;
    }

    .swiper-slide .img-shu{
        display: block;
        width: 230px;
        height: 336px;
        background-position: center!important;
        background-size: 100% 100% !important;
    }
    .little-slide{
        overflow: hidden;
        width: 230px;
        height: 336px;
    }
    .swiper-slide .img-shu:hover{
         transition: 0.5s;
         transform: scale(1.1,1.1);
     }
    .second-shuffling{
        position: relative;
        top: 180px;
        left: 0px;
        width: 1100px;
        margin: auto;
        overflow: hidden;
    }
    .second-big-shuffling{
       position: relative;
    }
    .word{
        background-color: rgba(0,0,0,.4);
        width: 1500px;
        height: 500px;
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 0.4;
        img{
            width: 100%;
            height: 100%;
        }
    }
    /deep/.swiper-pagination1.swiper-pagination-bullets{
        opacity: 0;
    }
    .toBottom{
        width: 250px;
        height: 120px;
        background-image: url("../../../assets/images/white.png");
        background-size: 100% 100%;
        position: fixed;
        opacity: 0.4;
        /*bottom: -49px;*/
        bottom: -728px;
        left: 639px;
        z-index: 10000;
    }
    .toBottom:hover{
        background-image: url("../../../assets/images/blue.png");
        background-size: 100% 100%;
    }
    .more{
        position: fixed;
        bottom: -632px;
        left: 1000px;
    }
</style>